<template>
  <s-modal
    title="编辑"
    :visible="visible"
    width="400px"
    ok-text="保存"
    :confirm-loading="confirmLoading"
    :closable="!confirmLoading"
    @ok="save()"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <div style="height: 400px">
      <s-scroll>
        <s-form ref="form" :value="formValue">
          <s-form-item
            label="名称"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            name="title"
            :rules="[
              { whitespace: true, required: true, message: '名称不能为空' },
              { max: 50, message: '最长为50位' }
            ]"
          >
            <a-auto-complete
              v-model:value="formValue.title"
              placeholder="名称"
              :filter-option="true"
              :options="keyOptions"
              @select="
                (value, option) => {
                  ;(formValue.title = option.value), (formValue.dataIndex = option.label)
                }
              "
            >
              <template #option="{ value, label }"> {{ value }}({{ label }}) </template>
            </a-auto-complete>
          </s-form-item>
          <s-form-item
            label="编码"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            name="dataIndex"
            :rules="[
              { whitespace: true, required: true, message: '编码不能为空' },
              { max: 50, message: '最长为50位' },
              {
                pattern: /^[a-z](([a-z]|[A-Z]|[0-9]){1,})$/,
                message: '编码只能使用英文字母或数字，且以小写字母开头'
              }
            ]"
          >
            <s-input v-model="formValue.dataIndex" :allow-clear="true" />
          </s-form-item>

          <s-form-item
            label="宽度"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            name="width"
            :rules="[{ required: true, message: '宽度不能为空' }]"
          >
            <s-input-number v-model="formValue.width" :max="999" />
          </s-form-item>
          <s-form-item
            label="排序"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 8 }"
            name="sorter"
          >
            <s-switch
              v-model="formValue.sorter"
              :check-value="true"
              :un-check-value="false"
            ></s-switch>
          </s-form-item>
          <s-form-item
            label="截断"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 8 }"
            name="ellipsis"
            tip="内容过长时，以省略号显示"
          >
            <s-switch
              v-model="formValue.ellipsis"
              :check-value="true"
              :un-check-value="false"
            ></s-switch>
          </s-form-item>
          <s-form-item
            label="翻译"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 8 }"
            name="echo"
          >
            <s-switch
              v-model="formValue.echo"
              :check-value="true"
              :un-check-value="false"
            ></s-switch>
          </s-form-item>

          <s-form-item
            v-if="formValue.echo"
            label="翻译接口"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            name="echoUrl"
            :rules="[{ whitespace: true, required: true, message: '翻译接口不能为空' }]"
          >
            <s-input v-model="formValue.echoUrl" :allow-clear="true" />
          </s-form-item>

          <s-form-item
            v-if="formValue.echo"
            label="文本字段"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            name="echoLabel"
            :rules="[{ whitespace: true, required: true, message: '文本字段不能为空' }]"
          >
            <s-input v-model="formValue.echoLabel" :allow-clear="true" />
          </s-form-item>
          <s-form-item
            v-if="formValue.echo"
            label="值字段"
            size="custom"
            :options="{ labelWidth: 8, wrapperWidth: 16, offsetWidth: 0, total: 24 }"
            name="echoValue"
            :rules="[{ whitespace: true, required: true, message: '值字段不能为空' }]"
          >
            <s-input v-model="formValue.echoValue" :allow-clear="true" />
          </s-form-item>
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
export default {
  name: 'Add',
  props: {
    keyOptions: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      formValue: {},
      confirmLoading: false,
      visible: false
    }
  },
  methods: {
    open(value, callBack) {
      this.formValue = value ? value : {}
      this.visible = true
      this.callBack = callBack
    },
    save() {
      const form = this.$refs.form
      form.validate((values) => {
        const flag = this.callBack(values)
        if (flag) {
          this.visible = false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
